<template>
  <div class="header-container">
    <div class="I-content">
      <el-button
        @click="collapsMenu"
        :icon="
          this.$store.state.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
        "
        size="mini"
      />
    </div>
    <div class="r-content">
      <el-badge is-dot class="item">
        <span class="el-icon-bell"></span>
      </el-badge>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img class="user" src="../../assets/images/header.png" alt="" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="个人中心">个人中心</el-dropdown-item>
          <el-dropdown-item command="退出">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { removeToken } from "@/utils/storage";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",
  data() {
    return {};
  },
  components: {},
  methods: {
    handleCommand(command) {
      if (command === "退出") {
        setTimeout(() => {
          removeToken("token");
          this.$message({
            message: "退出成功",
            type: "success",
          });
          this.$router.push("/login");
        }, 1000);
      }
    },
    ...mapMutations(["collapsMenu"]),
  },
  computed: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.header-container {
  height: 60px;
  padding: 0 20px 0 0;
  background-color: #fff;
  box-shadow: 0px -2px 5px #999999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .I-content {
    .text {
      color: #333;
      font-size: 32px;
      margin-left: 20px;
    }
    button {
      border: none;
      font-size: 32px;
      background-color: #fff;
    }
  }
  .r-content {
    .user {
      width: 40px;
      height: 40px;
      border-radius: 40px;
    }
    .item {
      margin-top: -20px;
      margin-right: 20px;
      font-size: 20px;
    }
  }
}
</style>
